<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>团购-详情页</title>
		<link rel="stylesheet" type="text/css" href="css/GroupPurchase_detail.css" />
		<script type="text/javascript" src="js/rem.js"></script>
		<style type="text/css">
			[v-cloak] {
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="app" v-cloak class="GroupPurchaseDetail">
			<div class="groupa">
				<div class="groupa_left">
					<div class="groupa_left_top">
						<img :src="logo" />
						<div>{{shopname}}</div>
					</div>
					<div class="groupa_left_bottom">
						{{mealtype}}
					</div>
				</div>
				<div class="groupa_right">
					<!--分享-->
					<div class="groupa_right_inner"></div>
				</div>
			</div>
			<div class="groupb">
				<img v-for="item in shopimgs" :src="item" />
			</div>
			<div class="groupc">
				{{mealname}}
			</div>
			<div class="groupd">
				<div v-for="item in menus" class="groupd_inner">
					<div class="groupd_inner_left">
						<div class="groupd_inner_left1"></div>
						<div class="groupd_inner_left2">{{item.name}}</div>
						<div class="groupd_inner_left3">（{{item.num}}份）</div>
					</div>
					<div class="groupd_inner_right">￥{{item.price}}</div>
				</div>
			</div>
			<div class="groupe">温馨提示</div>
			<div class="groupf">有效期：</div>
			<div class="groupg">
				<div class="groupg_left"></div>
				<div class="groupg_right">
					{{effectime}}
				</div>
			</div>
			<div class="groupf">使用时间：</div>
			<div class="groupg">
				<div class="groupg_left"></div>
				<div class="groupg_right">
					{{usertime}}
				</div>
			</div>
			<div class="groupf">使用规则：</div>
			<div v-for="item in rules" class="groupg">
				<div class="groupg_left"></div>
				<div class="groupg_right">
					{{item}}
				</div>
			</div>
			<div class="kong"></div>
			<div class="grouph">
				<div class="grouph_left">
					<div class="grouph_left_top">
						<div class="grouph_left_top_left">
							￥{{total}}
						</div>
						<div class="grouph_left_top_right">
							{{discount}}折
						</div>
					</div>
					<div class="grouph_left_bottom">
						最高门市价 ￥{{maxprice}}
					</div>
				</div>
				<div @click="topay" class="grouph_right">
					立即抢购
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/vue2.5.16.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				logo: 'images/store.png',
				shopname: '老苏州大客堂',
				mealtype: '2-3人套餐',
				shopimgs: ['images/img1.png', 'images/img2.png', 'images/img3.png', 'images/img1.png', ],
				mealname: '特色苏帮菜套餐',
				menus: [{
					name: '特色松鼠鱼',
					num: 1,
					price: 128
				}],
				effectime: '2017.10.24至2017.10.29（周末节假日通用）',
				usertime: '10:00 至 22:00',
				rules: ['无需预约，消费高峰可能需要等位', '无需预约，消费高峰可能需要等位', '无需预约，消费高峰可能需要等位'],

				total: 98,
				discount: 9.0,
				maxprice:263
			},
			methods:{
				topay:function(){
					window.location.href = 'pay.html'
				}			
			}
		})
	</script>

</html>